<template>
    <div class="mainListTable">
        <el-table ref="table" size="small" v-loading="loading" :data="lists" border stripe highlight-current-row header-cell-class-name="table-header-class" style="width:100%" @selection-change="handleSelectionChange">
            <el-table-column v-if="showCheck" type="selection" align='center' width="60">  
            </el-table-column>
            <el-table-column v-if="sequence && page" label="序号" width="60" align='center'>
                <template slot-scope="scope">
                    <span>{{scope.$index+(page.pageIndex - 1) * page.pageSize + 1}} </span>
                </template>
			</el-table-column>
            <slot/>
        </el-table> 
        <div class="pagination" v-if="page">
            <slot name="bottomLeft"></slot>
            <Pagination :size='page.pageSize' :index='page.pageIndex' :total='page.total' @change="handleChange" :style="'text-align:'+page.position"></Pagination>
        </div>           
    </div>
</template>
<script>
import Pagination from '@/components/public/pagination';
export default {
    props:{
        lists:Array,
        page:{}, // 分页：{pageSize,pageIndex,total}
        loading:{
            type:Boolean,
            default:()=>false
        },
        showCheck:{  // 是否显示选择框
           type:Boolean,
           default:false 
        },
        sequence:{  // 是否显示序列号
           type:Boolean,
           default:true 
        },
        selectKey:{  // 选择的key,如果需要指定返回多个字段的值，则用"|"分割
            type:String,
            default:'id' 
        }
    },
    data(){
        return{
            multipleSelectionIds:[]
        }
    },
    components:{
        Pagination
    },
    methods:{
        handleSelectionChange(item){
            // this.multipleSelectionIds = []
            // for(let i=0;i<item.length;i++){
            //     this.multipleSelectionIds.push(item[i][this.selectKey])
            // }
            // this.$emit('selectionChange',this.multipleSelectionIds,item)
            
            const keys = this.selectKey.split('|')
            const obj = {}
            for(let m=0;m<keys.length;m++){
                const key = keys[m]
                obj[key] = []
                for(let i=0;i<item.length;i++){
                    obj[key].push(item[i][key])
                }
            }
            this.$emit('selectionChange',obj,item)
        },
        handleChange(pageIndex) {
            this.$emit('pageChange',pageIndex)
        },
        setRowSelection(row){  // 设置默认选项,row为table的某一行数据
            row && this.$refs.table.toggleRowSelection(row);
        }
    }
}
</script>
<style>
    .pagination{
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 10px 0 0 0;
    }
    .el-table th {
        background-color: #eef2fe!important;
    }
    .mainListTable td img{
        display: inline-block;
        height: 50px;
    }
</style>